<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //第一遍
        /*  1,let拥有块级作用域
            2, let不存在变量的提前声明
            3, let不能重复声明
            4, let虽然是块级作用域但是不影响作用域链 
        */
        for(let i=0;i<box.length;i++){
            box[i].onclick=function(){
                alert(i);
            }
        }
        {
            let girl="班长";
        }
        let yuzong="没我帅";
        {
            let girl="班长";
            function fn(){
                console.log(girl);
            }
            fn()
        }
        //第二遍
        /* 1，let拥有块级作用域
           2，let不存在变量提前声明
           3，let不能重复声明
           4，let虽然是块级作用域但是不影响作用域链
         */
         for(let i=0;i<box.length;i++){
            box[i].onclick=function(){
                alert(i);
            }
        }
        {
            let girl="班长";
        }
        let yuzong="没我帅";
        {
            let girl="班长";
            function fn(){
                console.log(girl);
            }
            fn()
        }
        //第三遍
        /* 
           1，let拥有块级作用域
           2，let不能重复声明
           3，let不存在变量提前声明
           4，let虽然是块级作用域但是不影响作用域链
         */
         for(let i=0;i<box.length;i++){
            box[i].onclick=function(){
                alert(i);
            }
        }
        {
            let girl="班长";
        }
        let yuzong="没我帅";
        {
            let girl="班长";
            function fn(){
                console.log(girl);
            }
            fn()
        }
    </script>
</body>

</html>